<template>
  <div class="right-bottom">
    <div class="serve-title">
      互联网
      <br>+
      <br>服务
    </div>
    <div class="serve-total">
      <div class="serve-item" v-for="(item,index) in serveList" :key="index">
        <div class="bac" :style="{background:`url(${getImage('home',item.bacImg)}) 100% 100% no-repeat` }"></div>
        <span>{{item.title}}</span>
        <div class="num">
          {{item.num}}
          <i>{{item.unit}}</i>
        </div>
      </div>
    </div>
    <div class="control-progress">
      <div class="progress-item" v-for="(item,key) in controlList" :key="key">
        <!-- <el-progress :width="72" :color="item.color" type="circle" :percentage="item.progress">
          <span class="per-text">{{item.progress}}%</span>
        </el-progress>-->
        <div class="chart-dom" :id="item.id"></div>
        <div class="item-name">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import { getImageUrl } from '@/util'

export default {
  setup(props) {
    const obj = reactive({
      serveList: [
        {
          title: "总办理事项",
          num: 278,
          unit: "件",
          bacImg: "matter-total"
        },
        {
          title: "服务事项总类别",
          num: 178,
          unit: "类",
          bacImg: "serve-total"
        },
        {
          title: "平均办理时长",
          num: 24,
          unit: "时",
          bacImg: "time1"
        }
      ],
      controlList: [
        {
          progress: 60,
          id: "abc",
          color: "#388CFF",
          name: "服务满意度"
        },
        {
          progress: 96,
          id: "cef",
          color: "#388CFF",
          name: "事项按时办结率"
        }
      ]
    });

    const initChart = item => {
      const chartPie = document.getElementById(item.id);
      const chartDom = echarts.init(chartPie);
      var info = [
        {
          name: "shuiqiu",
          value: "55%"
        }
      ];
      var value = item.progress / 100;
      var colors = [
        [
          {
            offset: 0,
            color: "rgba(37,237,259, 1)"
          },
          {
            offset: 0.5,
            color: "rgba(0,100,259, 0.5)"
          },
          {
            offset: 1,
            color: "darkblue"
          }
        ]
      ];
      let option = {
        series: [
          {
            type: "liquidFill",
            radius: "80%",
            data: [value, value, value, value],
            backgroundStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,24,55, 0)"
                  },
                  {
                    offset: 0.75,
                    color: "rgba(0,24,55, 0)"
                  },
                  {
                    offset: 1,
                    color: "rgba(37,237,259, 1)"
                  }
                ],
                globalCoord: false
              }
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 0,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(50,115,256, 1)"
                    },
                    {
                      offset: 0.5,
                      color: "rgba(50,115,233, .75)"
                    },
                    {
                      offset: 1,
                      color: "rgba(50,115,233, 1)"
                    }
                  ],
                  globalCoord: false
                }
              }
            },
            // 改变水颜色
            itemStyle: {
              opacity: 0.5,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: colors[0],
                globalCoord: false
              }
            },
            // 替换根据水位变化的标签
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 18,
                  color: "#fff",
                  fontFamily: "DIN Next LT Pro"
                }
              }
            }
          }
        ]
      };

      chartDom.setOption(option);
    };

    let getImage = getImageUrl

    

    onMounted(() => {
      nextTick(() => {
        obj.controlList.forEach(item => {
          initChart(item);
        });
      });
    });
    return {
      ...toRefs(obj),
      getImage
    };
  }
};
</script>


<style lang="scss" scoped>
.right-bottom {
  width: 100%;
  height: 131px;
  padding: 10px 22px;
  display: flex;
  .serve-title {
    width: 26px;
    // height: 120px;
    background: rgba(46, 116, 227, 0.3);
    border-radius: 2px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #fff;
    text-align: center;
    // padding: 3px 0;
  }
  .serve-total {
    width: 368px;
    height: 100%;
    padding-top: 10px;
    @include flex-middle;
    .serve-item {
      @include flex-column-center;
      margin-left: 39px;
      .bac {
        width: 37px;
        height: 35px;
        background-image: url("@/assets/image/home/time1.png");
        background-size: 100% 100%;
      }
      span {
        margin-top: 7px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #cbddff;
      }
      .num {
        margin-top: 8px;
        font-size: 26px;
        font-family: DIN Next LT Pro;
        font-weight: bold;
        color: #edb200;
        i {
          font-size: 12px;
        }
      }
    }
  }
  .control-progress {
    @include flex;
    padding-top: 10px;
    .progress-item {
      // text-align: center;
      @include flex-column-center;
      margin-left: 40px;
      .chart-dom {
        width: 65px;
        height: 65px;
      }
      .item-name {
        margin-top: 10px;
        font-size: 12px;
        color: #cbddff;
      }
      .per-text {
        font-size: 16px;
        font-family: DIN Next LT Pro;
        font-weight: bold;
        color: #ffffff;
      }
      &:first-child {
        margin-left: 10px;
      }
    }
  }
}
</style>
